<template>
	<view>
		<tt-bar leftIcon="icon-back" title="助力进度" titleAlign="left" :isShare="isShare">
			<template v-slot:rightCnt>
				<text class="iconfont icon-shoucangdianjia" :style="{'background-color':goodData.isDelete?'#ffffff':btnBg}" @tap="toshop"></text>
				<!-- <text class="iconfont icon-home rIcon" :style="{'background-color':goodData.isDelete?'#ffffff':btnBg}" @tap="toHome"></text> -->
			</template>
			
		</tt-bar>
		<view class="constant">
			<view class="top">
				<swiper class="left" :circular="true"
							:vertical="true" 
							:autoplay="true" 
							:interval="2000" 
							:duration="2000" >
					<swiper-item v-for="(item,index) in userlist" :key="index">
					<view class="leftImg"><image :src="item.pic" mode=""></image></view>
					<view class="leftName"><text class="wenzitishi">{{item.nickName}}&nbsp;&nbsp;&nbsp;助力成功！</text></view>
					</swiper-item>
				</swiper>
				<view class="right" @tap="help">
					<text class="wenzitishi">全部助力课</text>
					<text class="iconfont icon-right"></text>
				</view>
			</view>
			<view class="content">
				<view class="courseInfo">
					<view class="tupian" @tap="toGood"><image :src="datalist.courseImg"></image></view>
					<view class="shoppingName">
						<view class="className">
							<text>{{ datalist.name }}</text>
						</view>
						<view class="jigou" @tap="toShop">
							<text>{{ datalist.storeName }}</text>
						</view>
						<!-- 助力中 -->
						<view class="timeBox" v-if="status == 1">
							<view class="time">
								<text>{{ _hour }}</text>
							</view>
							<view class="maohao"><text>:</text></view>
							<view class="time">
								<text>{{ _min }}</text>
							</view>
							<view class="maohao"><text>:</text></view>
							<view class="time">
								<text>{{ _sec }}</text>
							</view>
							<view class="end"><text>后结束助力</text></view>
						</view>
						<!-- 待购买 -->
						<view class="timeBox" v-if="status == 3">
							<view class="time">
								<text>{{ _hour }}</text>
							</view>
							<view class="maohao"><text>:</text></view>
							<view class="time">
								<text>{{ _min }}</text>
							</view>
							<view class="maohao"><text>:</text></view>
							<view class="time">
								<text>{{ _sec }}</text>
							</view>
							<view class="end"><text>后活动过期</text></view>
						</view>
						<!-- 已成功 -->
						<view class="timeBox1" v-if="status == 4"><image src="../static/suss.png" mode=""></image></view>
						<!-- 已失败 -->
						<view class="timeBox1" v-if="status == 2"><image src="../static/shibai.png" mode=""></image></view>
					</view>
				</view>
				<view class="helpjindu">
					<!-- 助力中 -->
					<view class="helpPlease" v-if="status == 1">
						<view class="price">
							<text class="zc">助力</text>
							<text class="money">￥</text>
							<text class="num">{{ powerSum }}</text>
							<text class="zc">,还差</text>
							<text class="money">￥</text>
							<text class="num">{{ surplusAmount }}</text>
						</view>
						<view class="jindutiao">
							<view class="jindutiaoLeft">
								<view class="jindutiaoimg"><view class="topline" :style="{ width: width + '%' }"></view></view>
								<view class="jindutiaowenzi">
									<!-- <text>{{ width }}%</text> -->
								</view>
							</view>
							<view class="jindutiaoRight">
								<view class="topwenzi"><text>最低</text></view>
								<view class="bottomwenzi">
									<text>￥{{ datalist.underPrice }}</text>
								</view>
							</view>
						</view>
						<button class="pleaseBtn" open-type="share"><image src="../static/helpbtnbig3.gif" mode=""></image></button>
					</view>
					<!-- 待购买 -->
					<view class="helpPlease1" v-if="status == 3">
						<view class="price1">
							<image src="../static/con1.png" mode=""></image>
							<text class="endhelp">已结束</text>
							<text class="zc">助力，成功砍至</text>
							<text class="money">￥</text>
							<text class="num">{{ datalist.underPrice }}</text>
						</view>
						<view class="shengqian">
							<text class="shengqian1">为您节省了</text>
							<text class="shengqian2">￥{{ powerSum }}</text>
						</view>

						<view class="pleaseBtn1" @tap="topay">
							<text class="Record">以￥{{ datalist.underPrice }}购买</text>
						</view>
					</view>
					<!-- 已成功 -->
					<view class="helpPlease1" v-if="status == 4">
						<view class="price1">
							<image src="../static/con1.png" mode=""></image>
							<text class="zc">助力</text>
							<text class="endhelp">成功</text>
							<text class="zc">,已通过</text>
							<text class="money">￥</text>
							<text class="num">{{ datalist.underPrice }}</text>
							<text class="zc">购买</text>
						</view>
						<view class="shengqian">
							<text class="shengqian1">为您节省了</text>
							<text class="shengqian2">￥{{ powerSum }}</text>
						</view>

						<view class="pleaseBtn2">
							<view class="blue" @tap="toOrderDt"><text>查看订单</text></view>
							<view class="red" @tap="help"><text>去选其他好课</text></view>
						</view>
					</view>
					<!-- 已失败 -->
					<view class="helpPlease1" v-if="status == 2">
						<view class="price1">
							<image src="../static/shibaicon.png" mode=""></image>
							<text class="zc">助力</text>
							<text class="endhelp">失败</text>
						</view>
						<view class="shengqian">
							<text class="shengqian1">商品砍至</text>
							<text class="shengqian2">￥{{ surplusAmount }}</text>
							<text class="shengqian1">,活动已过期</text>
						</view>

						<view class="pleaseBtn1"><text class="shibaixuanke" @tap="help">去选择其他好课</text></view>
					</view>
					<view class="helpRecord">
						<view class="Record">
							<view class="Recordleft"><text>助力记录</text></view>
							<view class="Recordright">
								<text>已助力{{ powerTotalNum }}次</text>
							</view>
						</view>
						<view class="friend" v-for="(item, index) in powerlist" :key="index">
							<view class="friendLeft">
								<view class="friendimg"><image :src="item.pic" mode=""></image></view>
								<view class="friendtext">
									<view class="toptext">
										<text>{{ item.nickname }}</text>
									</view>
									<view class="bottomtext"><text>小刀一砍，惊喜满满！</text></view>
								</view>
							</view>
							<view class="friendRight">
								<text>￥{{ item.powerPrice }}</text>
							</view>
						</view>
						<view class="friend">
							<view class="friendLeft">
								<view class="friendimg"><image :src="powerIn.pic" mode=""></image></view>
								<view class="friendtext">
									<view class="toptext">
										<text>{{ powerIn.nickName }}</text>
									</view>
									<view class="bottomtext"><text>小刀一砍，惊喜满满！</text></view>
								</view>
							</view>
							<view class="friendRight">
								<text>￥{{ powerIn.hisPowerPrice }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- <shareAction ref="shareAction"></shareAction> -->
	</view>
</template>

<script>
import { mapState, mapGetters, mapMutation, mapActions } from 'vuex';
// import shareAction from '../components/shareAction/shareAction.vue';
export default {
	components: {
		// shareAction
	},
	computed: {
		...mapState({
			userInfo: state => state.user.userInfo,
			isLogin: state => state.user.isLogin,
			initInfo: state => state.sys.initInfo
		})
	},
	data() {
		return {
			status: 1,
			datalist: {},
			powerlist: [],
			powerInId: 0,
			djsText: '',
			_hour: '',
			_min: '',
			_sec: '',
			width: 0,
			powerSum: 0,
			powerTotalNum: 0,
			surplusAmount: 0,
			powerIn: {},
			userlist:[],
			isShare:0
			
			
		};
	},
	methods: {
		toshop(){
			
		
			this.toPage(
			{
				url:'shopDetail',
				id:this.datalist.storeId
			}
			
			)
		},
		myhelp1() {
			uni.navigateTo({
				url: '../helpPlan/helpPlan'
			});
		},
		help() {
			uni.navigateTo({
				url: '../help/help'
			});
		},
		toGood() {
			this.toPage({
				url: 'goodDetail',
				id: this.datalist.courseId
			});
		},
		toShop() {
			this.toPage({
				url: 'shopDetail',
				id: this.datalist.storeId
			});
		},
		topay() {
			this.toPage({
				url: 'pay',
				id: this.powerIn.orderNo
			});
		},
		toOrderDt() {
			this.toPage({
				url: 'orderDt',
				id: this.powerIn.orderNo
			});
		},
		// // 分享
		// share() {
		// 	uni.$emit('showShare', {
		// 		type: 2,
		// 		id: this.datalist.courseId
		// 	});
		// 	this.$refs.shareAction.open();
		// },
		getjilu() {
			// 获取好友助力的列表
			this.$store
				.dispatch('apiOpenApowerlist', {
					powerInId: this.powerInId
				})
				.then(res => {
					
					this.powerlist = res.data.powerBuddies;
					this.powerSum = res.data.powerSum;
					this.powerTotalNum = res.data.powerTotalNum;
					this.surplusAmount = res.data.surplusAmount;
					this.width = res.data.percent;
					this.powerIn = res.data.powerIn;
					console.log(this.powerIn)
					this.daojishi();								
				});
		},
		//获取成功助力的用户
		getapiGetpowersuccess (){
			this.$store
				.dispatch('apiGetpowersuccess')
				.then(res => {
					
					this.userlist  = res.data.successMessage.cuser
					
				});
		},
		daojishi() {
			
			 setInterval(() => {
			//倒计时
			let _end = new Date(Date.parse(this.powerIn.createTime.replace(/-/g, '/')));//发起助力的时间
			let _endact = new Date(Date.parse(this.powerIn.actEndTime.replace(/-/g, '/'))); //活动结束时间
			var oldtime = new Date(_end);	
			var _now = new Date();//当前时间
			var _rightTime = _endact.getTime() - _now.getTime(); 
			var _leftTime = ''
			if(_rightTime > 24*60*60*1000){
				
				 _leftTime = oldtime.getTime() + 24*60*60*1000 - _now.getTime();
			}else{
				
				_leftTime = _rightTime
			}
							
			let _hour = Math.floor(_leftTime / (1000 * 60 * 60));
			let _min = Math.floor((_leftTime / (1000 * 60)) % 60);
			let _sec = Math.floor((_leftTime / 1000) % 60);
			this._hour = _hour > 9 ? _hour : '0' + _hour;
			this._min = _min > 9 ? _min : '0' + _min;
			this._sec = _sec > 9 ? _sec : '0' + _sec;
			this.djsText = _hour + ':' + _min + ':' + _sec;
			if(_leftTime < 0 ) {
				this._hour = "00";
				this._min = "00";
				this._sec = "00";
					
			}
			}, 1000);
			
		},
		//更新status的值
		getstatuspowerid (){
			
			this.$store
				.dispatch('getstatuspowerid', {
					userId :this.userInfo.userId,
					powerId:this.datalist.id
				})
				.then(res => {
					
					console.log(res);
					if(res.data.power.length>0){
						this.status = res.data.power[0].type
						console.log(this.status)
					}
					
					
				});
		},
		//统计分享数据
		apiOpenApowerlog(){
			this.$store
				.dispatch('apiOpenApowerlog', {
					userId :this.userInfo.userId,
					type:1,
					storeId:this.datalist.storeId
				})
				.then(res => {					
					console.log(res);										
				});
		}
		
		
		
	},
	//页面分享
	onShareAppMessage(res) {
		this.apiOpenApowerlog()
		var helpList = JSON.stringify(this.datalist);
		return {
			title: '“我看中了这门课，请帮我助个力吧，万分感谢！” ' + this.datalist.name,
			path: 'pagesB/zhelpPlan/zhelpPlan?index=' + helpList + '&powerInId=' + this.powerInId + '&isShare=1',
			imageUrl: this.datalist.courseImg,
			
		};	
	},
	onLoad(options) {
		this.isShare = options.isShare ? parseInt(options.isShare) : 0;
		this.datalist = JSON.parse(options.index); // 字符串转对象
		this.powerInId = options.powerInId || this.datalist.powerInId;
		this.status = this.datalist.type;
		this.getjilu();
		this.getstatuspowerid();
		this.getapiGetpowersuccess ();
		}
};
</script>

<style lang="less">
* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}
body {
	background-color: #fed407;
}
.top {
	background-color: #fed407;
	width: 100%;
	height: 100rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;

	.left {
		
		width: 40%;
		height: 50rpx;
		background-image: url(../static/btn-1.png);
		background-size: 100% 100%;
		margin-left: 20rpx;
		padding-left: 7rpx;
		display: flex;
		justify-content: start;
		align-items: center;
		swiper-item{
			// width: 40%;
			// height: 50rpx;
			// background-image: url(../static/btn-1.png);
			// background-size: 100% 100%;
			// margin-left: 20rpx;
			// padding-left: 7rpx;
			display: flex;
			justify-content: start;
			align-items: center;
			.leftImg {
				border-radius: 50%;
				background-color: red;
				width: 43rpx;
				height: 43rpx;
				overflow: hidden;
				margin-right: 15rpx;
				image {
					width: 100%;
					height: 100%;
				}
			}
			.leftName {
				color: #fff;
				font-size: 24rpx;
				line-height: 50rpx;
			}
		}
		
		
	}
	.right {
		width: 30%;
		height: 50rpx;
		background-image: url(../static/btn-2.png);
		background-size: 100% 100%;
		color: #fff;
		text-align: center;
		margin-right: 20rpx;

		.wenzitishi {
			font-size: 24rpx;
			line-height: 50rpx;
		}
		.icon-right {
			font-size: 26rpx;
			padding-left: 14rpx;
		}
	}
}
.content {
	width: 100%;
	padding: 40rpx 40rpx 0 40rpx;
	.courseInfo {
		width: 100%;
		height: 300rpx;
		background-color: #fff;
		margin-bottom: 40rpx;
		border-radius: 20rpx;
		display: flex;
		padding: 25rpx;
		position: relative;
		.tupian {
			width: 250rpx;
			height: 250rpx;
			image {
				border-radius: 10rpx;
				width: 100%;
				height: 100%;
			}
		}
		.shoppingName {
			padding-left: 20rpx;
			width: 354rpx;

			.className {
				font-weight: 700;
				font-size: 30rpx;
				margin-bottom: 10rpx;
				height: 39rpx;
				overflow: hidden;
			}
			.jigou {
				color: #a6a6a6;
				font-size: 24rpx;
				margin-bottom: 85rpx;
				width: 355rpx;
				height: 39rpx;
				overflow: hidden;
			}
			.timeBox {
				margin-left: 10rpx;
				display: flex;
				.time {
					width: 50rpx;
					height: 50rpx;
					background-color: red;
					text-align: center;
					border-radius: 5rpx;
					text {
						line-height: 50rpx;
						color: #fff;
					}
				}
				.maohao {
					width: 25rpx;
					height: 50rpx;
					text-align: center;
					text {
						color: red;
						line-height: 50rpx;
					}
				}
				.end {
					margin-left: 15rpx;
					height: 50rpx;
					text-align: center;
					text {
						color: #bebebe;
						line-height: 50rpx;
						font-size: 22rpx;
					}
				}
			}
			.timeBox1 {
				position: absolute;
				bottom: -10rpx;
				right: 0px;

				image {
					width: 100rpx;
					height: 100rpx;
				}
			}
		}
	}
	.helpjindu {
		width: 100%;
		// height: 750rpx;
		background-color: #fff;
		margin-bottom: 40rpx;
		border-radius: 20rpx;
		padding: 40rpx;
		.helpPlease {
			.price {
				.zc {
					font-size: 26rpx;
					color: #4e4e4e;
				}
				.num {
					color: red;
					font-size: 40rpx;
				}
				.money {
					color: red;
					font-size: 22rpx;
				}
			}
		}

		.helpPlease1 {
			.price1 {
				text-align: center;
				image {
					width: 30rpx;
					height: 30rpx;
					margin-right: 10rpx;
					vertical-align: middle;
				}
				.zc {
					font-size: 26rpx;
					color: #4e4e4e;
				}
				.endhelp {
					font-size: 26rpx;
					// font-weight: 700;
					color: #4e4e4e;
					// margin-right: 15rpx;
				}
				.num {
					color: red;
					font-size: 26rpx;
				}
				.money {
					color: red;
					font-size: 26rpx;
				}
			}
			.shengqian {
				text-align: center;
				.shengqian1 {
					font-size: 26rpx;
					color: #ccc;
					font-weight: 300;
				}
				.shengqian2 {
					font-size: 26rpx;
					color: red;
					font-weight: 300;
				}
			}
		}
		.pleaseBtn1 {
			// width: 100%;
			margin: 45rpx;
			height: 80rpx;
			background-image: url(../static/helpbtnbig.png);
			background-size: 100% 100%;
			text-align: center;
			.Record {
				color: red;
				font-size: 40rpx;
				font-weight: 900;
				line-height: 85rpx;
				text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;
			}
			.shibaixuanke {
				font-size: 40rpx;
				font-weight: 900;
				line-height: 85rpx;
				color: #fff;
				font-size: 30rpx;
			}
		}
		.pleaseBtn2 {
			margin: 45rpx 0;
			height: 85rpx;
			display: flex;
			justify-content: space-between;
			.red {
				width: 275rpx;
				height: 75rpx;
				background-image: url(../static/bulebtn.png);
				background-size: 100% 100%;
				text-align: center;
				text {
					color: #fff;
					font-size: 30rpx;
					font-weight: 900;
					line-height: 75rpx;
				}
			}
			.blue {
				width: 275rpx;
				height: 75rpx;
				border-radius: 38rpx;
				background-color: #ffae02;
				text-align: center;
				text {
					color: #fff;
					font-size: 30rpx;
					font-weight: 900;
					line-height: 75rpx;
				}
			}
		}
		.jindutiao {
			display: flex;
			align-items: flex-end;
			height: 70rpx;
			// background-color: green;

			.jindutiaoLeft {
				height: 15rpx;
				flex: 85;
				display: flex;
				align-items: center;

				.jindutiaoimg {
					width: 100%;
					// margin-left: 50rpx;
					height: 100%;
					background-image: url(../static/jindutiao.png);
					background-size: 100% 100%;

					.topline {
						height: 100%;
						background-color: #fcd100;
						border-radius: 30rpx;
					}
				}
				.jindutiaowenzi {
					text-align: center;
					text {
						line-height: 45rpx;
						color: #ccc;
						font-size: 18rpx;
					}
				}
			}
			.jindutiaoRight {
				height: 100%;
				flex: 15;
				color: red;
				font-size: 28rpx;
				text-align: center;
			}
		}
		.pleaseBtn {
			// width: 100%;
			margin: 50rpx 0;
			height: 100rpx;
			width: 100%;
			// background-image: url(../static/helpbtnbig.png);
			background-size: 100% 100%;
			text-align: center;
			background-color: transparent;
			text {
				color: red;
				font-size: 40rpx;
				font-weight: 900;
				line-height: 85rpx;
				text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;
			}
			image {
				width: 100%;
				height: 100%;
			}
		}
		.helpRecord {
			.Record {
				display: flex;
				justify-content: space-between;
				text {
					font-size: 26rpx;
					color: #4e4e4e;
				}
			}

			.friend {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 30rpx;

				.friendLeft {
					display: flex;
					.friendimg {
						width: 80rpx;
						height: 80rpx;
						margin-right: 5rpx;
						image {
							width: 100%;
							height: 100%;
							border-radius: 50%;
						}
					}
					.friendtext {
						.toptext {
							text {
								color: #4e4e4e;
								font-size: 22rpx;
							}
						}
						.bottomtext {
							text {
								color: #4e4e4e;
								font-size: 22rpx;
							}
						}
					}
				}
				.friendRight {
					color: red;
					font-size: 26rpx;
				}
			}
		}
	}
}

.icon-shoucangdianjia {
		font-size: 44upx;
		font-weight: normal;
		width: 70upx;
		height: 70upx;
		text-align: center;
		line-height: 70upx;
		border-radius: 50%;
	}
</style>
